<template>
  <div class="data-show-section">
    <!-- 设备总提货量 -->
    <div class="device-data">
      <total-device-info />
    </div>
    <el-row
      type="flex"
      class="row-bg"
      justify="center">
      <el-col
        :span="12"
        class="device-actived-section">
        <!-- 品类激活数 -->
        <device-actived/>
      </el-col>
      <el-col
        :span="12"
        class="device-link-section">
        <!-- app月活数 -->
        <app-active />
      </el-col>
    </el-row>
  </div>
</template>

<script>
import totalDeviceInfo from './components/total-device-info'
import deviceActived from './components/device-actived'
import appActive from './components/app-active'

export default {
  components: { totalDeviceInfo, deviceActived, appActive }
}
</script>

<style>
.device-data{
  margin-top: 20px;
  margin-bottom: 20px;
  background-color: rgb(2, 48, 101);
  color: red;
}
.data-show-section {
  padding-right: 20px;
}
.device-actived-section{
  margin-right: 20px;
  background-color: rgb(2, 48, 101);
}
.device-link-section{
  /* margin-left: 20px; */
  /* background-color: rgb(2, 48, 101); */
}
</style>
